import React, {Component} from 'react';
import {Card, Button} from 'antd';
import {connect} from 'dva';

const namespace = 'puzzlecards';

/**
 * dva同步(注入)state到组件当中,注入到的是所有的namespace的state,需要使用namespace来取
 * @param state
 * @returns {{cardList: *}}
 */
const mapStateToProps = (state) => {
    // dva model会适时调用,传入state,这个state所有namespace的state,是一个数组
    const cardList = state[namespace].data;
    return {cardList}
}
/**
 * dva同步(注入)方法到组件,也可以通过这个进行回调,修改namespace当中的state
 * @param dispatch
 */
const mapDispatchToProps = (dispatch) => {
    return {
        //action是 reducers 及 effects 的触发器，一般是一个对象，
        // 形如{ type: 'add', payload: todo }，
        // 通过 type 属性可以匹配到具体某个 reducer 或者 effect，payload 属性则是数据体，
        // 用于传送给 reducer 或 effect。
        onClickAdd: (newCard) => {
            const action = {
                // type: `${namespace}/addNewCard`,
                type: `${namespace}/addNewCard`,
                payload: newCard,
            }
            dispatch(action);
        },
        onDidMount: () => {
            dispatch({
                type: `${namespace}/queryInitCards`,
            })
        }
    }
}

//connect 是连接 dva 和 React 两个平行世界的关键
@connect(mapStateToProps, mapDispatchToProps)
export default class PuzzleCardsPage extends Component {
    //在 React 16 中，页面初始化时的异步请求必须只能在 componentDidMount 中做，
    //不能在 constructor, UNSAFE_componentWillMount, UNSAFE_componentWillReceiveProps, getDerivedStateFromProps 中做。
    componentDidMount() {
        this.props.onDidMount();
    }

    render() {
        return (
            <div>
                {
                    this.props.cardList.map(card => {
                        return (
                            <Card key={card.id}>
                                <div>Q:{card.setup}</div>
                                <div>
                                    <strong>A:{card.punchline}</strong>
                                </div>
                            </Card>)
                    })
                }
                <div>
                    <Button onClick={
                        //    因为使用的dva调用,因此写的是回调函数
                        () => this.props.onClickAdd({
                            setup: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
                            punchline: 'here we use dva',
                        })
                    }>添加卡片</Button>
                </div>
            </div>
        );
    }
}

